/**
 * @constructor aliyun form
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Field, Checkbox, Form, Select } from '@teamix/ui';
import constants from 'utils/constants';
import Editor from 'components/editor';
import intl from '../../../locale';

const { languageOptions } = constants.ENUM;

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    span: 14,
  },
};

const Java = 'Java';
const java_build_script = intl.get({
  id: 'code-assets.projectSecuritySettingModal.dependency.CustomizeTheBuildCommandWhich',
  defaultMessage:
    '# 自定义构建命令，支持 maven3.5.2，命令执行目录为代码库根路径，示例如下：\nmvn -B clean package -Dmaven.test.skip=true -Dautoconfig.skip',
});

const triggerInfo = [
  {
    label: intl.get({
      id: 'code-assets.projectSecuritySettingModal.dependency.CodeSubmissionTriggersScanning',
      defaultMessage: '代码提交触发扫描',
    }),
    value: 'commit_trigger',
  },
];

export default class ImportProjectByUrlModal extends React.Component {
  static propTypes = {
    data: PropTypes.object,
    modalPlugin: PropTypes.object,
  };

  static defaultProps = {
    data: {},
    modalPlugin: {},
  };

  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.state = {};
  }

  componentDidMount() {
    const { data, modalPlugin } = this.props;
    const key = modalPlugin && modalPlugin.key;
    if (!key) {
      return;
    }
    const detail = data && data[key];
    const { commit_trigger, build_language, build_language_version, build_script, enabled } =
      detail;
    const trigger = [];
    // 已开启读取服务设置，未开启默认勾选
    if (enabled) {
      if (commit_trigger) {
        trigger.push('commit_trigger');
      }
    } else {
      trigger.push('commit_trigger');
    }
    this.field.setValues({
      trigger,
      lang_java: build_language === Java,
      build_language_version,
      build_script,
    });
  }

  getReqData = () => {
    const params = {
      build_language: '',
      build_language_version: '',
      build_script: '',
      commit_trigger: false,
      enabled: true,
    };

    const { modalPlugin } = this.props;
    const formData = this.field.getValues();
    if (formData.trigger) {
      params.commit_trigger = formData.trigger.includes('commit_trigger');
    }
    params.build_language = formData.lang_java ? Java : '';
    params.build_script = formData.build_script || '';
    params.build_language_version = formData.build_language_version || '';
    return {
      key: modalPlugin.key,
      params,
    };
  };

  render() {
    const { init } = this.field;

    return (
      <div className="dependency">
        <Form {...formItemLayout} field={this.field} labelAlign="top">
          <FormItem
            label={
              <div>
                {intl.get({
                  id: 'code-assets.projectSecuritySettingModal.dependency.TriggerMode',
                  defaultMessage: '• 触发方式',
                })}
              </div>
            }
          >
            <Checkbox.Group itemDirection="hoz" {...init('trigger')}>
              {triggerInfo.map((it) => {
                return (
                  <Checkbox value={it.value} key={it.value}>
                    {it.label}
                  </Checkbox>
                );
              })}
            </Checkbox.Group>
          </FormItem>
          <FormItem
            label={
              <div>
                {intl.get({
                  id: 'code-assets.projectSecuritySettingModal.dependency.DetectionParameters',
                  defaultMessage: '• 检测参数',
                })}
              </div>
            }
          >
            <div className="dependency-tip">
              {intl.get({
                id: 'code-assets.projectSecuritySettingModal.dependency.SupportsDependencyPackageVulnerabilityDetection',
                defaultMessage:
                  '支持 Java 、Python、Golang、Node.js 等常见语言的依赖包漏洞检测。其中 Java\n              需编译后分析，请设置编译命令，否则将影响检测结果',
              })}
            </div>
          </FormItem>
          <FormItem
            label=""
            {...init('lang_java', {
              initValue: false,
              props: {
                onChange: (value) => {
                  if (value) {
                    this.field.setValue('build_language_version', languageOptions[Java].default);
                    this.field.setValue('build_script', java_build_script);
                  } else {
                    this.field.setValue('build_language_version', '');
                    this.field.setValue('build_script', '');
                  }
                },
              },
            })}
          >
            <Checkbox checked={this.field.getValue('lang_java')}>
              {intl.get({
                id: 'code-assets.projectSecuritySettingModal.dependency.SetJavaDetectionParameters',
                defaultMessage: '设置Java检测参数',
              })}
            </Checkbox>
          </FormItem>
          {this.field.getValue('lang_java') && (
            <FormItem
              label={intl.get({
                id: 'code-assets.projectSecuritySettingModal.dependency.Version',
                defaultMessage: '版本',
              })}
            >
              <Select
                style={{ width: '200px' }}
                {...init('build_language_version', {
                  initValue: languageOptions[Java].default,
                })}
              >
                {languageOptions[Java].versions.map((version) => {
                  return (
                    <Select.Option value={version} key={version}>
                      {version}
                    </Select.Option>
                  );
                })}
              </Select>
            </FormItem>
          )}

          {this.field.getValue('lang_java') && (
            <FormItem
              label={
                <div>
                  {intl.get({
                    id: 'code-assets.projectSecuritySettingModal.dependency.CompileCommands',
                    defaultMessage: '• 编译命令',
                  })}
                </div>
              }
            >
              <div>
                <Editor
                  {...init('build_script', {
                    initValue: java_build_script,
                  })}
                  fileName={''}
                  editorStyle={{ height: 110 }}
                  size="small"
                  theme="vs-dark"
                />
              </div>
            </FormItem>
          )}
        </Form>
      </div>
    );
  }
}
